<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet/less" type="text/css" href="less/metro.less" />
		<style>
			body { width: 900px; margin: 0 auto; }
		</style>
		<script type="text/javascript" src="scripts/less-1.3.0.min.js"></script>
    	<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="scripts/jquery.metro.js"></script>
		<script type="text/javascript" src="scripts/tilt.js"></script>
	</head>
	<body>
		<h1 class="lime">Title</h1>
		<div class="tiles">
			<div class="tilerow">
				<div class="tile two-h limebg"><h1>Sale</h1></div>
				<div class="tile one bluebg"><h2>ทดสอบ</h2></div>
			</div>
		</div>
		<div class="metro-pivot">
			<div class="pivot-item">
				<h3>Message</h3>
				<p> content </p>
			</div>	
			<div class="pivot-item">
				<h3>ข้อความ</h3>
				<p> content</p>
			</div>	
		</div>
		<div>
			<form action="#">
				<fieldset>
					<legend class="lime"><h2>My form</h2></legend>
					<label>Name</label>
					<input type="text" />
					<label>e-Mail</label>
					<input type="text" />
					<input class="limebg" type="button" value="Submit">
					<input class="redbg" type="button" value="Cancel">
				</fieldset>
			</form>
		</div>
		<script>
			var defaults = {
				animationDuration: 350,
				headerOpacity: 0.25,
				fixedHeaders: false,
				headerSelector: function (item) { return item.children("h3").first(); },
				itemSelector: function (item) { return item.children(".pivot-item"); },
				headerItemTemplate: function () { return $("<span class='header' />"); },
				pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
				itemsTemplate: function () { return $("<div class='items' />"); },
				headersTemplate: function () { return $("<div class='headers' />"); },
				controlInitialized: undefined,
				selectedItemChanged: undefined
			};
			$(function () {
				$("div.metro-pivot").metroPivot(defaults);


				$(".tile").each(addTileTilt);

			});
		</script>
	</body>
</html>